Une démo de Slidy + Algodok
On peut donc faire une présentation avec des actions originales, en particulier via la
la mémoire à instructions et des objets identifiés, comme la liste suivante
(identifiée par la liste 1
).
Par exemple on peut écrire ( " Avec Slidy & Algodok !")
.dans (tout ("slide") .du (document)), ou aussi
- commuter ("la mémoire à instructions") .sur ("visible") ;
- rendre .déplaçable (le. conteneur .de ("la poignée 1"))
.via ("la poignée 1") ;
- On commence par désactiver ("toutes les touches")
avant de rendre .éditable ("la liste 1") ;
- rendre .non .éditable ("la liste 1") ; réactiver ("toutes les touches") ;
- prochain .transparent()…
Les différents ingrédients possibles
Avancement de la présentation : en appuyant sur la barre d'espace ou sur les flèches de
navigation (vers la gauche ou vers la droite)
.
- Pour une présentation en HTML : Slidy.
- Pour ajouter des formules en LaTeX : MathJax, comme ci-dessous
(recharger la page en cas de mauvais affichage).
Définition de la fonction exponentielle :
\( \displaystyle \exp(z) = \sum_{k=0}^{+\infty} \frac{x^k}{k!} \).
- Pour ajouter des formules en LaTeX simplifié : Formulo, comme ci-dessous.
Le théorème des résidus :
int_{color{red}partial K} f(z) text{d}z quad =
quad frac{1}{2i pi} sum_{p in color{red}\mathring{K}} text{Res}(f,p).
Piloter le diaporama
Le diaporama est piloté par les touches du clavier, comme avec PowerPoint,
en particulier pour passer d'un élément de présentation au suivant,
on appuie sur la barre d'espace et pour rendre l'ensemble des diapos visible
on utilise la touche A.
- Les flèches de navigation et les touches Page up et Page down
permettent d'avancer ou de reculer dans la présentation.
- La taille de la police est initialement
ajustée pour correspondre à la largeur de fenêtre du navigateur, mais on peut la régler
à l'aide des touches S (pour réduire) et B (pour agrandir).
On peut aussi utiliser les touches + et - du pavé numérique.
- La touche F permet d'afficher/cacher la ligne d'état en bas.
ATTENTION :
La touche K permet de basculer sur l'utilisation ou non
du clic de la souris pour passer d'une diapo à la suivante ; à éviter donc.
- Les touches C et T permettent d'afficher/cacher la table des matières.
La touche F11 (sur PC ; ⌘⇧F sur Mac)
permet de basculer sur un mode plein écran.
Concevoir le diaporama
On utilise les identifiants (attribut id) et les classes (attribut class).
- Une diapo est définie comme un élément div avec l'attribut class="slide".
Le positionnement par CSS et les largeurs en pourcentage sur les images
peuvent être utilisés pour assurer un ajustement proportionnel à la taille de la fenêtre.
- Pour permettre de révéler progressivement le contenu d'un élément
on doit lui ajouter la classe incremental…
- …en particulier pour les listes.
Les listes (balises ol et ul)
La liste suivante est extensible / rétractable
:
on utilise class="outline".
- Ici li est de classe expand (
étendue
)
- a rendre .déplaçable (le. conteneur .de ("la poignée 2"))
.via ("la poignée 2")
- b : bla bla bla
- Une image à découvrir… en cliquant sur cet item !
- On dit
apple
en anglais :
- Amusant, non ?
Les titres (balises h1, h2, …)
Les titres de niveau 1 sont repris par la table des matières,
comme pour cette dernière diapo.
Mais le titre d'une diapo est forcément et uniquement dans le premier élément h1.
Ceci est un titre de niveau 2
Le titre précédent n'est pas repris par la table des matières,
tout comme le suivant.
Ceci est un titre de niveau 3
Pour revenir au début du diaporama : c'est par là !
